<template>
  <div class="app-container">
    <div v-if="user">
      <el-row :gutter="20">
        <el-col :span="6" :xs="24">
          <user-card :user="user" />
        </el-col>

        <el-col :span="18" :xs="24">
          <el-card>
            <el-tabs v-model="activeTab">
              <el-tab-pane label="Account" name="account">
                <account />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts">
  import UserCard from './components/UserCard.vue';
  import Account from './components/Account.vue';
  import { computed, defineComponent, ref } from 'vue';
  import { useStore } from 'vuex';
  import { State } from '@/store';

  export default defineComponent({
    name: 'Profile',
    components: { UserCard, Account },
    setup() {
      const activeTab = ref('account');
      const store = useStore<State>();
      const user = computed(() => store.getters['account/info']);
      return {
        activeTab,
        user,
      };
    },
  });
</script>
